<!doctype html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>数据统计</title>
    <link rel="stylesheet" href="css/default-assets/new/toastr.min.css">
    <link rel="stylesheet" href="css/default-assets/new/sweetalert-2.min.css">
    <link rel="stylesheet" href="style.css">
    <style>
        table a{
            cursor: pointer;
        }

    </style>
</head>

<body>


<div class="ecaps-page-wrapper">
    <!-- Sidemenu Area -->
    <div class="ecaps-sidemenu-area">
        <!-- Desktop Logo -->
        <div class="ecaps-logo">
            <a href="#" style="justify-content: center">管理员
            </a>
        </div>

        <!-- Side Nav -->
        <div class="ecaps-sidenav" id="ecapsSideNav">
            <!-- Side Menu Area -->
            <div class="side-menu-area">
                <!-- Sidebar Menu -->
                <nav>
                    <ul class="sidebar-menu" data-widget="tree" id="sidebar">

                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- Page Content -->
    <div class="ecaps-page-content">
        <!-- Top Header Area -->
        <header class="top-header-area d-flex align-items-center justify-content-between">
            <div class="left-side-content-area d-flex align-items-center">
                <!-- Mobile Logo -->
                <div class="mobile-logo mr-3 mr-sm-4">
                    <a href="#">管理员</a>
                </div>

                <!-- Triggers -->
                <div class="ecaps-triggers mr-1 mr-sm-3">
                    <div class="menu-collasped" id="menuCollasped">
                        <i class="zmdi zmdi-menu"></i>
                    </div>
                    <div class="mobile-menu-open" id="mobileMenuOpen">
                        <i class="zmdi zmdi-menu"></i>
                    </div>
                </div>

                <!-- Left Side Nav -->
                <ul class="left-side-navbar d-flex align-items-center">

                </ul>
            </div>

            <div class="right-side-navbar d-flex align-items-center justify-content-end">
                <!-- Mobile Trigger -->
                <div class="right-side-trigger" id="rightSideTrigger">
                    <!--<i class="ti-align-left"></i>-->
                </div>

                <!-- Top Bar Nav -->
                <ul class="right-side-content d-flex align-items-center">


                </ul>
            </div>
        </header>

        <!-- Main Content Area -->
        <div class="main-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-4 mb-3">
                        <div class="card bg-boxshadow full-height">
                            <div class="card-body">
                                <h4 class="card-title mb-0">用户进度比例</h4>
                                <div id="chart1" style="height: 400px"></div>

                            </div>
                        </div>
                    </div>

                    <div class="col-8 mb-3">
                        <div class="card bg-boxshadow full-height">
                            <div class="card-body">
                                <h4 class="card-title mb-0">分数段数据</h4>
                                <div id="chart2" style="height: 400px"></div>

                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bundle.js"></script>

<!-- Active JS -->
<script src="js/default-assets/active.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/mulu.js"></script>
<script src="js/default-assets/basic-form.js"></script>
<script src="js/default-assets/toastr.min.js"></script>
<script src="js/default-assets/sweetalert2.min.js"></script>
<script src="js/manifest.js"></script>
</body>
<script>
    _Setmenu('tongji');

    const _Gettongji1 = function(){
        return new Promise((succ,err)=>{
            s.sb("user");
            s.g("c/common_list",{
                s:(d)=>{
                    if(d.code == 200){
                        let list = d.data;
                        let nd = [0,0,0,0];
                        for(let i = 0 ; i < list.length ;i ++){
                            nd[list[i].nandu] ++;
                        }
                        _Chart1(nd);
                        succ();
                    }
                }
            })
        })
    }

    const _Gettongji2 = function(){
        return new Promise((succ,err)=>{
            s.sb("jilu");
            s.g("p/getfenshu",{
                s:(d)=>{
                    if(d.code == 200){
                        let n1 = d.n1;
                        let n2 = d.n2;
                        let n3 = d.n3;
                        let n4 = d.n4;
                        _Chart2(n1,n2,n3,n4);
                    }
                }
            })
        })
    }

    _Gettongji1().then(()=>{
        return _Gettongji2();
    })

    //环形图，饼图
    const _Chart1 = function(nd){
        let chartDom = document.getElementById('chart1');
        let myChart = echarts.init(chartDom);
        let option;

        option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '用户进度比例',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [{
                        value:nd[0],
                        name:'入门'
                    },{
                        value:nd[1],
                        name:'低难度'
                    },{
                        value:nd[2],
                        name:'中难度'
                    },{
                        value:nd[3],
                        name:'高难度'
                    }]
                }
            ]
        };

        option && myChart.setOption(option);   //创建图表
    }

    //柱状图
    const _Chart2 = function(n1,n2,n3,n4){
        //数据格式要求
        //x轴：['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        //y轴：[100, 150, 120, 90, 50, 130, 110]

        let chartDom = document.getElementById('chart2');
        let myChart = echarts.init(chartDom);
        let option;

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['入门', '低', '中', '高']
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: { show: false },
                    data: ['0-20', '20-40', '40-60', '60-80', '80-100']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '入门',
                    type: 'bar',
                    barGap: 0,
                    emphasis: {
                        focus: 'series'
                    },
                    data: _Chuli(n1)
                },
                {
                    name: '低',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    data: _Chuli(n2)
                },
                {
                    name: '中',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    data: _Chuli(n3)
                },
                {
                    name: '高',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    data: _Chuli(n4)
                }
            ]
        };

        option && myChart.setOption(option);   //创建图表
    }


    const _Chuli = function(arr){
        let list = [0,0,0,0,0];
        for(let i = 0 ; i < arr.length ;i  ++){
            let fs = ~ ~ arr[i].jf;
            if(fs >= 0 && fs <20){
                list[0]++;
            }
            if(fs >= 20 && fs <40){
                list[1]++;
            }
            if(fs >= 40 && fs <60){
                list[2]++;
            }
            if(fs >= 60 && fs <80){
                list[3]++;
            }
            if(fs >= 80 && fs <=100){
                list[4]++;
            }
        }
        return list;
    }
</script>
</html>